<!--
 * @Author: your name
 * @Date: 2021-10-06 14:47:40
 * @LastEditTime: 2021-10-06 15:03:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\pages\Ref_learn\toRefs.vue
-->
<template>
  <div>
    <h1>
      toRefs
    </h1>

    <a-typography>

      <a-typography-title>count</a-typography-title>
      <a-typography-paragraph>
        <p>count1: {{ state.count1 }}</p>
        <p>stateToRefs: {{ stateToRefs.count1 }}</p>
        <a-space>
          <a-button type="primary" @click="changeCount('add')">增加</a-button>
          <a-button type="primary" @click="changeCount('reduce')">减少</a-button>  
        </a-space>  
      </a-typography-paragraph> 

      <a-typography-title>state2 - count3</a-typography-title>
      <a-typography-paragraph>
        <p>count3: {{ count3 }}</p>
        <a-space>
          <a-button type="primary" @click="changeCount2('add')">增加</a-button>
          <a-button type="primary" @click="changeCount2('reduce')">减少</a-button>  
        </a-space>  
      </a-typography-paragraph> 
      
    </a-typography>
    
  </div>
</template>

<script>
import { ref, toRefs, reactive } from 'vue';

export default {
  setup(props) {
    /* toRefs 作用1：
     * 复制一个响应的数据
     */ 
    let state = reactive({
      count1: 1,
      count2: 1,
    })
    const stateToRefs = toRefs(state)
    const changeCount = (type) => {
      if (type === 'add') {
        state.count1 ++
      } else {
        state.count1 --
      }
    }
    /** toRefs 作用2：
     * 解构
     */
    let state2 = reactive({
      count3: 3,
    })
    const changeCount2 = (type) => {
      if (type === 'add') {
        state2.count3 ++
      } else {
        state2.count3 --
      }
      console.log(state2.count3)
    }

    return {
      state,
      stateToRefs,
      changeCount,

      ...toRefs(state2),
      changeCount2,
    }
  }
}
</script>

<style>

</style>